<template>
  <div id="tab-bar">
    <div class="tab-bar-item">
      <div class="kefu">
        <p><img src="~assets/images/home/图层14@2x.png" alt="" /></p>
        <p>客服</p>
      </div>

      <div class="soucang">
        <p><img src="~assets/images/home/图层15@2x.png" alt="" /></p>
        <p>收藏</p>
      </div>

      <div class="gouwuche" @click="goCart">
        <p><img src="~assets/images/home/图层13@2x.png" alt="" /></p>
        <p>购物车</p>
      </div>
    </div>

    <div class="tab-bat-btn">
      <div class="btn-1 border-left" @click="addToCart">加入购物车</div>
      <div class="btn-2">立即购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  methods: {
    addToCart () {
      this.$emit('addCart')
    },
    goCart () {
      this.$router.push('/cart')
    }
  }
};
</script>

<style lang="less" scoped>
#tab-bar {
  height: 0.49rem;
  display: flex;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.2);
  .tab-bar-item {
    display: flex;
    flex: 1;
    justify-content: space-around;
    text-align: center;
    height: 0.49rem;
    font-size: 0.12rem;
    img {
      width: 0.2rem;
      height: 0.2rem;
      margin-top: 0.03rem;
      margin-top: 0.065rem;
      vertical-align: middle;
      margin-bottom: 0.02rem;
    }
    .item-text {
      margin-top: 0.05rem;
    }
  }
  .tab-bat-btn  {
    display: flex;
    flex: 1;
    text-align: center;
    line-height: .49rem;
    .btn-1 {
      width: 1rem;
      height: .49rem;
      color: #D20A0A;
      font-size: .15rem;
    }
    .btn-2 {
      width: 1rem;
      height: .49rem;
      color: #FEFEFE;
      font-size: .15rem;
      background: #D20A0A;
    }
  }
}
</style>
